<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="keywords" content="华为电子表,太空表">
		<meta name="author" content="新新小朋友">
		<link rel="icon" type="image/x-icon" href="./太空人.gif"/>
		<link rel="stylesheet" type="text/css" href="./css/index.css"/>
		<title>太空人</title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			window.onload = () => {
				let h = document.querySelector(".houer")
				let f = document.querySelector(".minute")
				let s = document.querySelector(".miao")
				let months = document.querySelector(".month")
				let days = document.querySelector(".day")
				let number = document.querySelector(".number")
				let bs = document.querySelector(".bs")
				let process = document.querySelector(".process")
				let quantity = parseInt(process.innerText)
				// 时间
				time()
				date()

				//心率 步数
				function heartbeat() {
					let num = ~~(80 + Math.random() * 10 + Math.random() * 10 + Math.random() * 10 + Math.random() * 10)
					number.innerText = num
					bs.innerText = ++bs.innerText
				}
				setInterval(() => {
					heartbeat()
				}, 1000)

				// 电量
				function electricity() {
					quantity--
					process.innerHTML = `${quantity}%`
					if (quantity <= 1) {
						quantity = 1
					}
				}
				setInterval(() => {
					electricity()
				}, 5000)

				function time() {
					let data = new Date()
					let s1 = data.getHours() < 10 ? "0" + data.getHours() : data.getHours()
					let s2 = data.getMinutes() < 10 ? "0" + data.getMinutes() : data.getMinutes()
					let s3 = data.getSeconds() < 10 ? "0" + data.getSeconds() : data.getSeconds()
					h.innerText = s1
					f.innerText = s2
					s.innerText = s3
					requestAnimationFrame(time)
				}

				setInterval(function() {
					date()
				}, 1000 * 60)

				function date() {
					let data = new Date();
					let month = data.getMonth() + 1
					let day = data.getDate()
					let week = data.getDay()
					// months.innerHTML = `${month}月${day}`
					week = transformation(week)
					days.innerHTML = `周${week} ${month}-${day}`


				}

				// 日期转换
				function transformation(data) {
					let val = null
					switch (parseInt(data)) {
						case 1:
							val = "一"
							break;
						case 2:
							val = "二"
							break;
						case 3:
							val = "三"
							break;
						case 4:
							val = "四"
							break;
						case 5:
							val = "五"
							break;
						case 6:
							val = "六"
							break;
						case 0:
							val = "日"
							break;
					}
					return val
				}
			}
		</script>
	</head>
	<body>
		<!-- bgm -->
		<audio src="./1.mp3" autoplay loop ></audio>
		<!-- 太空人 -->
		<div class="banner">
			<!-- 顶部 -->
			<div class="header">
				<!-- 当前电量，可变化 -->
				<div class="left">
					<div class="img"></div>
					<div class="process">100%</div>
				</div>
				<!-- 当前天气状况，可变化 -->
				<div class="right">
					<!-- 天气状况 -->
					<p class="status">空气优质</p>
					<div class="weather">
						<p id="s1">晴天</p>
						<p id="s2">26°</p>
						<p class="img">
							<img src="三角形_上.png" alt="如图片无法加载,请联系新新小朋友">
						</p>
					</div>
					<div class="temperature">
						<p id="now">25°C</p>
						<p id="s3">20°</p>
						<p class="img">
							<img src="三角形.png" alt="如图片无法加载,请联系新新小朋友">
						</p>
					</div>
					<div class="change">
						<img id="change" src="./太阳.png" alt="如图片无法加载,请联系新新小朋友">
					</div>
				</div>
			</div>
			<!-- 中间 -->
			<div class="body">
				<!-- 时间显示 -->
				<div class="up">
					<!-- 时分 -->
					<div class="time">
						<span class="houer">16</span>
						<span class="solid">
							<span></span>
							<span></span>
						</span>
						<span class="minute">57</span>
					</div>
					<!-- 秒 -->
					<div class="miao">
						54
					</div>
				</div>
				<div class="model">
					<!-- 显示当前城市 -->
					<div class="city" id="city">
						<div class="img">
							<img src="位置.png" >
						</div>
						兰州
					</div>
					<!-- logo -->
					<div class="img">
						<!-- <img src="./太空人.gif" alt="图片无法加载,请联系新新小朋友"> -->
					</div>
					<!-- 日期 -->
					<div class="date">
						<p class="month">二月初十</p>
						<p class="day">周一 3-22</p>
					</div>
				</div>
				<div class="down">
					<!-- 心率 -->
					<div class="rate">
						<p class="num">80-128</p>
						<img src="./面性心率图标.png" alt="">
						<!-- 可变化的心率值 -->
						<p class="number">89</p>
					</div>
					<!-- 步数 -->
					<div class="steps">
						<div class="img"></div>
						<span class="bs">12345</span>
					</div>
				</div>
			</div>
			<!-- 底部 -->
			<div class="footer">
				<div class="top">
					<div class="estate">睡眠</div>
					<div class="km">7h30m</div>
					<div class="distance">距离</div>
				</div>
				<div class="under">
					<div class="null"></div>
					<div class="km">8.66km</div>
					<div class="null"></div>
				</div>
			</div>
		</div>
		<!-- 右键菜单 -->
		<div class="oncontextmenu">
			<div>
				<span>制作者</span>
				<span>新新小朋友</span>
			</div>
			<div>
				<span>切换城市</span>
				<span>点击切换</span>
			</div>
			<div>
				<span>前进</span>
				<span>Alt+右箭头</span>
			</div>
			<div>
				<span>后退</span>
				<span>Alt+左箭头</span>
			</div>
			<div>
				<span>重新加载</span>
				<span>Ctrl+R</span>
			</div>
		</div>
	</body>
	<!-- 用jQuery封装的Ajax获取天气 -->
	<script src="./js/index.js" type="text/javascript" charset="utf-8"></script>
	<!-- 引入农历 -->
	<script src="./js/data.js" type="text/javascript" charset="utf-8"></script>
</html>
